/*
 * @Description: 底部tabbar组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:50:56
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-23 16:31:20
 */
<template>
  <div class="foot_main">
    <div class="foot_perch"></div>
    <div class="foot_area flex-h flex-hsb">
      <div
        v-for="(menu, index) in menuList"
        :key="index"
        class="foot_menu fontsize24"
        :class="index == selectedIndex ? 'selected_menu' : ''"
        @click="chooseMenu(index)"
      >
        <div class="foot_icon">
          <i
            class="iconfont fontsize48"
            :class="menu.icon"
          ></i>
        </div>
        <p>{{menu.name}}</p>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return { // 底部按钮配置
      menuList: [{
        icon: 'icon-xianluguihua',
        name: '定制班线'
      }, {
        icon: 'icon-chepiao',
        name: '我的车票'
      }, {
        icon: 'icon-timelist',
        name: '购票记录'
      }]
    }
  },
  props: {
    selectedIndex: 0 // 当前选中按钮下标
  },
  methods: {
    chooseMenu (num) {
      if (this.selectedIndex !== num) { // 仅页面跳转时调用，当前页面点击当前按钮无效
        let pageUrl = ['buyIndex', 'myIndex', 'recordIndex']
        this.$router.push({ name: pageUrl[num] })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.foot_main {
  .foot_perch {
    height: 100px;
  }
  .foot_area {
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    z-index: 2;
    .foot_menu {
      width: 100%;
      text-align: center;
      color: #999;
    }
    .selected_menu {
      color: #027aff;
    }
  }
}
</style>
